<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	//http://localhost:8080/logistics/
%>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,role-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" action="${empty role ?'role/insert.do':'role/update.do'}" method="post" id="adminForm">
	<!-- 修改管理时候的id：隐藏域 -->
	<input type="hidden" name="roleId" value="${role.roleId}">
	<!-- 隐藏域，用于提交权限id数据 -->
	<input type="hidden" id="permissionIds" name="permissionIds" value="${role.permissionIds}">
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text"  placeholder="请输入角色名称" value="${role.rolename}"  id="rolename" name="rolename">
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">备注：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<textarea name="remark" cols="" rows="" class="textarea"  placeholder="请输入角色描述不超过100个字符">${role.remark}</textarea>
		</div>
	</div>
	
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3">系统权限：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<ul id="permissionTree" class="ztree"></ul>
		</div>
	</div>
	
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 

<script type="text/javascript">
	/* zTree的设置对象 */
	var setting = {
		data : {
			/* 支持简单json格式数据 */
			simpleData : {
				enable : true,
				/* zTree数据的id名称 */
				idKey: "permissionId",
				/* zTree数据的父id名称 */
				pIdKey: "parentId",
			}
		},
		/* 是否支持复选框 */
		check : {
			enable : true
		},
		/* 异步加载数据 */
		async : {
			enable : true,
			url : "permission/getAllPermission.do",
			/* 对加载的数据进行预处理 */
			dataFilter: ajaxDataFilter
		},
		/* 异步加载数据以后回调 */
		callback: {
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
	};
	
	/* 异步加载数据成功以后回调 */
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		//获取zTree树对象
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
	 /*
	 	zTree数据回显思路
	 	
	 	1，将后台共享的角色权限id字符串切割成数组
	 	var  permissionIds = "49,1,13,15,16,17,67,68,69,70,71,12,22,23,24,25";
	 	
	 	2,循环数组，得到每一个id值，zTree有一个可以通过节点的属性值获取节点的方法
	 		调用zTree 通过 permissionId 属性的值获取对应节点的方法
	 		
	 	2.1让其节点选中即可
	 */
		var  permissionIds = "${role.permissionIds}";
		
	 	var permissionIdsArr =  permissionIds.split(",");
		
	    for(var i = 0; i<permissionIdsArr.length; i++){
	    	//获取每一个权限id值
	    	var permissionId = permissionIdsArr[i];
	    	
	    	//获取 permissionId 属性对应的值的节点
	    	var node = treeObj.getNodeByParam("permissionId", permissionId, null);
	    	
	    	console.log(node);
	    	if(node !=null){
	    		//让其节点选中即可
		    	treeObj.checkNode(node, true, false);
	    	}
	    	
	    }
	};
	
	/* 数据预处理函数 */
	function ajaxDataFilter(treeId, parentNode, responseData) {
	
		if (responseData) {
			for (var i = 0; i < responseData.length; i++) {
					/* 为每一行节点数据添加一个open属性，让其节点展开 */	
					responseData[i].open =true;
					//禁用url
					responseData[i].url =null;
				}
		}
		return responseData;
	};
	
	$(function() {
		//初始化zTree
		$.fn.zTree.init($("#permissionTree"), setting);
	});
	
	
</script>


<script type="text/javascript">
$(function(){
	/*
		使用Jquery.validate 表单校验插件进行表单校验
	*/
	
	$("#adminForm").validate({
		/* rules: 校验规则 */
		rules:{
			rolename:{
				required:true,
				
			},
			remark:{
				required:true,
				maxlength:100
			}
		},
		/* 校验失败的提示信息 */
		messages:{
			rolename:{
				required:"角色不能为空",
			},
			remark:{
				required:"角色描述不能为空",
				maxlength:"角色描述最多100个字"
			}
		},
		submitHandler:function(form){
			
			
			//1.获取zTree树对象： 注意，此处不是id选择器，没有# 
			var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
			//2.获取选中的节点
			var nodes = treeObj.getCheckedNodes(true);
			
			//没有分配一个权限
			if(nodes.length == 0){
				layer.msg("您还没有分配权限，请分配权限以后再提交数据！！",{icon:2});
				//终止函数运行
				return false;
			}
			
			
			//3.循环节点，获取每一个节点的id，并且以逗号分隔拼接成字符串
			
			var permissionIdsArr = [];
			for(var i = 0 ;i<nodes.length;i++){
				//获取单个节点
				var node = nodes[i];
				//将节点的权限id获取添加数据
				permissionIdsArr.push(node.permissionId);
			}
			
			//将数组转换成字符串
			var permissionIds = permissionIdsArr.toString(); //1,2,4,6,8...
			
			//var permissionIds = permissionIdsArr.join("$"); //1$2$4$6$8...
			console.log(permissionIds);
			
			//将获取的权限数据设置给表单隐藏域 permissionIds 
			$("#permissionIds").val(permissionIds);
			
			
			
			
			//提交表单
			$(form).ajaxSubmit(function(data){
				
				layer.msg(data.msg,{icon:data.code},function(){
					
					//新增成功
					if(data.code == 1){
						//1,刷新父页面bootstrap-table表格
						parent.refreshTable();
						//2,关闭模态窗口
						parent.layer.closeAll();
					}
					
				})
				
			});
			
		}
		
		
	})
	
	
	
});
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>